@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
        <title>DAMP 2.0 Samples</title>

        <style type="text/css">
            *{ margin:0; padding:0; list-style:none; outline:none; }
        </style>
    </head>

    <body>

        <div id="razorSample">
            <h1>Razor</h1>

            @{
                //DAMP File
                //With DAMP Property Editor Value Converter you can do .First to get the first available media item.
                dynamic item1 = CurrentPage.dampFile.First;
    
                <h3 style="margin-top: 20px;">Razor DAMP file sample</h3>
                <p>Download: <a href="@item1.Url" target="_blank">@item1.Name</a></p>
                
                //DAMP Classic
                //The DAMP Property Editor Value Converter can also return all selected media items as dynamic media.
                //This example get's the first item, but you also do a foreach on it.
                dynamic item2 = CurrentPage.dampClassic.Media[0];
    
                <h3 style="margin-top: 20px;">Razor DAMP classic sample</h3>
                <img src="@item2.umbracoFile" alt="@item2.nodeName" height="400px"/>
                    
                <table>
                    <tr>
                        <td style="vertical-align: top; padding-right: 20px;">

                            @*DAMP New wide*@
                            @*You can always do a count on DAMP Property Editor Value Converter. This is the only check required to see if any DAMP items are selected.*@
                            @if (CurrentPage.dampNewWide.Count > 0)
                            {
                                <h3 style="margin-top: 20px;">Razor DAMP new wide sample</h3>
                                <ul>
                                    @*The DAMP Property Editor Value Converter returns a List<DAMP_Item> by default which you can loop through.*@
                                    @foreach (dynamic d in CurrentPage.dampNewWide)
                                    {
                                        <li>
                                            @*The DAMP_Item has many properties. It's easy to get a crop or alt field.*@
                                            @*The crop name needs to lowercased and will return the url of the crop.*@
                                            <img src="@d.Crops.widecrop" alt="@d.Alt"/>
                                        </li>
                                    }

                                </ul>
                            }

                        </td>
                        <td  style="vertical-align: top;">

                            @*DAMP New long*@
                            <h3 style="margin-top: 20px;">Razor DAMP new long sample</h3>
                            @{
                                //You can also get the DAMP Property Editor Value Converter as a strongly typed model.
                                DAMP.PropertyEditorValueConverter.Model items = new DAMP.PropertyEditorValueConverter.Model(Model.Content.GetPropertyValue("dampNewLong"));

                                //In addition to a Count you can also use Any.
                                if(items.Any)
                                {
                                    <ul>
                                        @*The DAMP.PropertyEditorValueConverter.Model inherits from List<DAMP_Item> so you can just loop through it.*@
                                        @foreach (var item in items)
                                        {
                                            <li>
                                                @*The Crops property is only useful if you use it dynamically, but TypedCrops returns a dictionary you can just use.*@
                                                <img src="@item.TypedCrops["longcrop"]" alt="@item.Alt"/>
                                            </li>
                                        }
                                    </ul>
                                }
                            }

                        </td>
                    </tr>
                </table>
                }
        </div>
    </body>
</html>